<template>
  <div class="position-page">
    <div class="w-full absolute left-0 top-0 bg h-600px bg"></div>

    <div class="w-1200px mx-auto relative z-1">
      <div class="top relative">
        <div class="flex items-center">
          <h2 class="text-#333 text-24px font-700 m-0 lh-24px">{{ pageInfo?.title || '' }}</h2>
          <div class="text-#F30404 text-24px ml-50px lh-24px">{{ makeUnitStr(pageInfo) }}</div>
        </div>
        <div class="mt-22px flex items-center text-#333 text-16px font-400 lh-16px">
          <span v-html="topTags"></span>
        </div>

        <div class="btn-box" v-if="pageInfo?.state === 0 || pageInfo?.state === 1 || pageInfo?.state === 2">
          <a-button type="primary" @click="handleOneKey(pageInfo?.jobId)" v-if="!Delivery"> 一键投递 </a-button>
        </div>
      </div>
      <div class="bottom">
        <div class="left-box pt-25px pl-34px pr-30px pb-36px">
          <div class="title">
            <span>职位描述</span>
          </div>
          <div class="mt-24px text-#666666 text-14px lh-24px break-all" v-html="pageInfo?.description"></div>
          <a-divider class="mb-34px!" />
          <div class="title mt-10px">
            <span>任职要求</span>
          </div>
          <div class="mt-32px lh-24px text-14px text-#666 text-wrap break-all" v-html="pageInfo?.competence"></div>

          <a-divider class="mb-34px!" />
          <div class="title">
            <span>职位亮点</span>
          </div>
          <div class="tag-box">
            <ul>
              <li v-for="(item, index) in plusesNames" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>

          <a-divider class="mb-34px!" />
          <div class="tuan-dui-qing-kuang">
            <div class="title">
              <span>团队情况</span>
            </div>
            <div class="mt-32px flex">
              <div class="w-1/3">
                <div class="text-#666 text-14px lh-14px lh-14px mb-10px">汇报对象</div>
                <div class="text-#111 text-14px font-400 lh-14px">{{ pageInfo?.reportTarget || '-' }}</div>
              </div>
              <div class="flex-1">
                <div class="text-#666 text-14px lh-14px lh-14px mb-10px">上级风格</div>
                <div class="text-#111 text-14px font-400 lh-14px">{{ pageInfo?.leaderStyleNames?.join(' ') }}</div>
              </div>
            </div>
            <div class="mt-30px">
              <div class="text-#666 text-14px lh-14px lh-14px mb-10px">团队介绍</div>
              <p class="text-#111 text-14px font-400 lh-24px break-all">
                {{ pageInfo?.teamIntro }}
              </p>
            </div>
          </div>

          <a-divider />
          <div class="di-dian">
            <div class="title">
              <span>工作地点</span>
            </div>
            <div class="mt-34px">
              <div class="addr">
                <img src="../assets/images/address@2x.png" class="w-13px h-17px mr-4px" alt="" />
                <span> {{ pageInfo?.address }}</span>
              </div>
              <div class="map" ref="mapRef"></div>
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="right-box flex-1 ml-20px">
          <div class="w-full card-1 bgi rounded-6px pt-24px pl-24px pr-70px pb-36px">
            <div class="title">
              <span>职位发布者</span>
            </div>
            <div class="w-77px h-77px rounded-8px mt-26.5px">
              <img v-if="pageInfo?.logoVisitUrl" :src="pageInfo?.logoVisitUrl" alt="" class="w-full h-full" />
              <img v-else src="@/assets/images/qiyelogo.png" alt="" class="w-full h-full" />
            </div>
            <div class="text-#333 mt-22px lh-16px text-16px">{{ pageInfo?.name }}</div>
            <div class="flex items-center mt-16px text-#666 lh-14px text-14px">
              <img src="../assets/images/fenlei@2x.png" class="w-15px h-15px mr-7px" alt="" />
              <span>{{ pageInfo?.industryName }}</span>
            </div>
            <div class="flex items-center mt-16px text-#666 lh-14px text-14px">
              <img src="../assets/images/guimo@2x.png" class="w-15px h-12px mr-7px" alt="" />
              <span>
                {{ pageInfo?.scaleName }}
              </span>
            </div>
            <div class="flex items-center mt-16px text-#666 lh-14px text-14px" v-if="pageInfo?.isListed">
              <img src="../assets/images/guimo@2x.png" class="w-15px h-12px mr-7px" alt="" />
              <span> 已上市 </span>
            </div>
            <div class="flex items-center mt-16px text-#666 lh-18px text-14px" v-if="pageInfo?.teamIntro">
              <img src="../assets/images/guimo@2x.png" class="w-15px h-12px mr-7px" alt="" />
              <span> {{ pageInfo?.teamIntro }} </span>
            </div>

            <div class="mt-16px text-14px" v-if="pageInfo?.website">
              <a :href="makeHttp(pageInfo.website)" target="_blank">
                <span>公司主页</span>
                <RightOutlined #icon class="text-12px ml-2px" />
              </a>
            </div>
          </div>

          <div class="card-1 w-full mt-23px rounded-6px p-24px" style="background: white">
            <div class="title">
              <span>推荐课程</span>
            </div>

            <div
              class="cursor-pointer w-full h-125px mt-23px rounded-6px overflow-hidden"
              style="box-shadow: 0 1px 10px 0 #d0cbcc7a"
            >
              <a href="http://med.cledu.cn/" target="_blank">
                <img src="../assets/images/新媒体@2x.png" class="w-full h-full" alt="" />
              </a>
            </div>

            <div
              class="cursor-pointer w-full h-125px mt-23px rounded-6px overflow-hidden"
              style="box-shadow: 0 1px 10px 0 #d0cbcc7a"
            >
              <a href="http://dat.cledu.cn/" target="_blank">
                <img src="../assets/images/数据分析@2x.png" class="w-full h-full" alt="" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="h-54px"></div>
  </div>
</template>

<script lang="ts" setup>
import PositionService from '@/api/position';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { RightOutlined } from '@ant-design/icons-vue';
import { useIsLoginCallback } from '@/hooks';
import { message } from 'ant-design-vue';
import { makeUnitStr } from '@/utils/util';
import UserService from '@/api/user';

const route = useRoute();
const router = useRouter();
const { positionId } = route.params;
const pageInfo = ref();
const mapRef = ref();
const plusesNames = computed(() => pageInfo.value?.plusesNames || []);
const query = route.query;
const jobHotId = query.jobHotId || null;
const Switch = ref();
const Delivery = ref(false);

const mapInstance = ref();
const isLoginCallback = useIsLoginCallback(errorFunc);

const topTags = computed(() => {
  return [pageInfo.value?.area, pageInfo.value?.workingYears, pageInfo.value?.qualification]
    .filter((t) => t)
    .join('&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;');
});

function makeHttp(s: string) {
  if (!s.startsWith('http')) {
    return `//` + s;
  }
  return s;
}

function handleOneKey(id: string) {
  isLoginCallback(() => {
    Onekey(id);
  });
}
// 一键投递
async function Onekey(id: string) {
  if (!Delivery.value) {
    if (jobHotId) {
      const _params = { jobId: positionId, jobHotId };
      const resp = await UserService.seekerSendResumes(_params);
      if (resp.code === 200) {
        Delivery.value = resp.data ? resp.data : true;
        message.success('简历投递成功');
      } else {
        message.error(resp.msg);
      }
    } else {
      const resp = await UserService.seekerSendResumes2(id);
      if (resp.code === 200) {
        Delivery.value = resp.data ? resp.data : true;
        message.success('简历投递成功');
      } else {
        message.error(resp.msg);
      }
    }
  } else {
    return false;
  }
}

async function selectHrJobInfo() {
  try {
    const resp = await PositionService.selectHrJobInfo(positionId);

    if (resp.code === 200) {
      const data = resp.data;
      resp.data.description = resp.data.copyWriting?.replace(/\n/g, '<br>');
      resp.data.competence = resp.data.topic?.replace(/\n/g, '<br>');

      pageInfo.value = resp.data;
      Switch.value = resp.data.judgeCollect;
      Delivery.value = resp.data.judgeSend;
      nextTick(() => {
        initMap(data.latitude, data.longitude);
      });
    }
  } catch (error) {
    console.log(error);
  }
}

function initMap(lat: number, lng: number) {
  const TMap = (window as any).TMap;
  const container = mapRef.value;
  const center = new TMap.LatLng(lat, lng); //设置中心点坐标
  //初始化地图
  mapInstance.value = new TMap.Map(container, {
    center: center,
  });
  //创建并初始化MultiMarker
  const markerLayer = new TMap.MultiMarker({
    map: mapInstance.value,
  });
  markerLayer.add({ position: center });
}

function errorFunc() {
  message.warn(`请先登录再进行该操作`);
  router.replace('/login');
}

onMounted(() => {
  selectHrJobInfo();
});

onUnmounted(() => {
  if (mapInstance.value) {
    mapInstance.value.destroy();
  }
});
</script>

<style lang="scss" scoped>
.bg {
  background: linear-gradient(0deg, #f6f6f6, #eaf1fe);
}

@mixin title-box {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  line-height: 16px;
  position: relative;

  span {
    position: relative;
    z-index: 2;
  }
  &::before {
    position: absolute;
    content: '';
    display: block;
    width: 31px;
    height: 31px;
    background: url(../assets/images/company-title@2x.png) no-repeat;
    background-size: cover;
    left: -10px;
    top: -7px;
  }
}
.position-page {
  @apply bg-#F6F6F6 relative pt-47px;

  .title {
    @include title-box();
  }

  .top {
    width: 100%;
    height: 140px;
    background: #ffffff;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 40px 20px 40px 40px;
    box-shadow: 0 1px 10px 0 #d0cbcc7a;
    position: relative;

    .btn-box {
      position: absolute;
      right: 20px;
      bottom: 28px;
      :deep(.ant-btn) {
        @apply w-125px rounded-5px h-34px;
        background: linear-gradient(90deg, #3576e9, #5a95fb);
      }
    }
  }

  .bottom {
    @apply flex mt-30px;
    .left-box {
      @apply w-860px rounded-6px bg-white;
      box-shadow: 0 1px 10px 0 #d0cbcc7a;
    }
  }

  .tag-box {
    margin-bottom: 28px;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 12px;
    margin-top: 28px;
    ul,
    li {
      list-style: none;

      padding: 0;
      margin: 0;
      color: #666;
    }

    ul {
      display: flex;
      margin: -4px;
      flex-wrap: wrap;
    }

    li {
      height: 24px;
      background: #ecf1fe;
      border-radius: 2px;
      padding: 0 10px;
      line-height: 24px;
      text-align: center;
      margin: 4px;
    }
  }

  .addr {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 14px;
    margin-bottom: 23px;
    font-weight: 400;
  }
  .map {
    width: 100%;
    height: 160px;
    :deep(.tmap-zoom-control) {
      margin: 16px 30px 20px;
    }
  }

  .card-1 {
    box-shadow: 0 1px 10px 0 #d0cbcc7a;
    &.bgi {
      background: url(../assets/images/zhiwifabuzhe-bg@2x.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
